<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>事件详情</title>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/amazeui.min.css" />
<style>
ul li {
	list-style: none;
}

blockquote p {
	font-size: 16px;
	font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti,
		MingLiu;
}

.am-container {
	width: 1000px !important;
	max-width: none;
}

.track-list {
	float: right;
	font-size: 14px;
	margin: 20px;
	padding-left: 5px;
	position: relative;
}

.track-list li {
	position: relative;
	padding: 9px 0 0 25px;
	line-height: 18px;
	border-left: 1px solid #d9d9d9;
	color: #999;
}

.track-list li.first {
	font-weight: bold;
	color: #14B4D0;
	padding-top: 0;
	border-left-color: #fff;
}

.track-list li .node-icon {
	position: absolute;
	left: -6px;
	top: 50%;
	width: 11px;
	height: 11px;
	background:
		url(${pageContext.request.contextPath}/images/order-icons.png) -21px
		-72px no-repeat;
}

.track-list li.first .node-icon {
	background-position: 0 -72px;
}

.track-list li .time {
	margin-right: 20px;
	position: relative;
	top: 4px;
	display: inline-block;
	vertical-align: middle;
}

.track-list li .txt {
	max-width: 600px;
	position: relative;
	top: 4px;
	display: inline-block;
	vertical-align: middle;
}

.track-list li.first .time {
	margin-right: 20px;
}

.track-list li.first .txt {
	max-width: 600px;
}

.finish {
	float: left;
	width: 600px;
	height: 200px;
}

.content {
	clear: both;
}

.text {
	float: left;
	width: 350px;
}

.image {
	float: left;
}

.detail {
	clear: both;
}
</style>
</head>
<body>
	<!-- header start -->
	<header class="am-topbar">
	<div class="am-container">
		<h1 class="am-topbar-brand">
			<a href="/">走失宠物搜救系统</a>
		</h1>

		<div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse">
			<ul class="am-nav am-nav-pills am-topbar-nav">
				<li class="am-active"><a href="#">首页</a></li>
			</ul>

			<div class="am-topbar-right">
				<div class="am-dropdown" data-am-dropdown="{boundary: '.am-topbar'}">
					<button
						class="am-btn am-btn-secondary am-topbar-btn am-btn-sm am-dropdown-toggle"
						data-am-dropdown-toggle>
						操作 <span class="am-icon-caret-down"></span>
					</button>
					<ul class="am-dropdown-content">
						<li><a href="${pageContext.request.contextPath}/my/user/toChildrenEdit.do">报案</a></li>
						<li><a href="${pageContext.request.contextPath}/event/reportEvent.do">检索</a></li>
					</ul>
				</div>
			</div>
			<c:if test="${empty user.id}">
				<div class="am-topbar-right">
					<a href="${pageContext.request.contextPath}/account.jsp" class="am-btn am-btn-secondary am-topbar-btn am-btn-sm">注册</a>
				</div>
				<div class="am-topbar-right">
					<a href="${pageContext.request.contextPath}/login.jsp" class="am-btn am-btn-secondary am-topbar-btn am-btn-sm">登录</a>
				</div>
			</c:if>
		</div>
	</div>
	</header>
	<!-- header end -->
	<div class="am-container">
		<ol class="am-breadcrumb">
			<li><a href="#" class="am-icon-home">首页</a></li>
			<li><a href="#">事件详情</a></li>
			<li class="am-active">${event.children.name }</li>
		</ol>
	</div>
	<div class="am-container">
		<div class="finish">
			<h2>结案说明</h2>
			<c:if test="${empty event.finish}">
				<blockquote>
					<p>尚未结案</p>
				</blockquote>
			</c:if>
			<c:if test="${!empty event.finish}">
				<blockquote>
					<p>${event.finish }</p>
					<small>${event.police_name }</small>
				</blockquote>
			</c:if>
		</div>
		<div class="track-list">
			<ul id="track-list">
				<li class="first"><i class="node-icon"></i> <span class="time"><fmt:formatDate
							value="${event.submit_time }" pattern="yyyy-MM-dd HH:mm" /></span> <span
					class="txt">您已提交案情</span></li>
				<li><i class="node-icon"></i> <span class="time"><fmt:formatDate
							value="${event.event_time }" pattern="yyyy-MM-dd HH:mm" /></span> <span
					class="txt">事件发生</span></li>
			</ul>
		</div>
		<div class="content">
			<div class="text">
				<h2>${event.children.name }基本信息</h2>
				<blockquote>
					<p>姓名：${event.children.name }</p>
					<c:if test="${event.children.sex==1}">
						<p>年龄性别：${event.children.age }岁男孩</p>
					</c:if>
					<c:if test="${event.children.sex==2}">
						<p>年龄性别：${event.children.age }岁女孩</p>
					</c:if>
					<p>失踪地点：${event.event_point }</p>
					<p>
						失踪时间：
						<fmt:formatDate value="${event.event_time }"
							pattern="yyyy-MM-dd HH:mm" />
					</p>
					<p>负责工作人员：${event.police_name }${event.police_phone }</p>
				</blockquote>
			</div>
			<div class="image">
				<img class="am-circle" alt=""
					src="${pageContext.request.contextPath}/images/test.jpg"
					width="230" height="270">
			</div>
			<div class="detail">
				<h2>详情</h2>
				<blockquote>
					<p>${event.content }${event.children.characteristic }</p>
				</blockquote>
			</div>
		</div>
	</div>
	<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
	<script src="${pageContext.request.contextPath}/js/amazeui.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$.post("${pageContext.request.contextPath}/time.do", {
				'id' : '${event.id}'
			}, function(data, status) {
				obj = $.parseJSON(data);
				$.each(obj,function(index,item) {
					if(item.police_id_time!==''){
						$('.first').before("<li class='first'><i class='node-icon'></i><span class='time'>"
								+item.police_id_time+"</span><span class='txt'>公安机关已受理</span></li>").removeClass();
					}
					if(item.police_start_time!==''){
						$('.first').before("<li class='first'><i class='node-icon'></i> <span class='time'>"+
								item.police_start_time+"</span> <span class='txt'>民警侦查中</span></li>").removeClass();
					}
					if(item.finish_time!==''){
						$('.first').before("<li class='first'><i class='node-icon'></i> <span class='time'>"+
								item.finish_time+"</span> <span class='txt'>本案已结案</span></li>").removeClass();
					}
				});
			});
		});
	</script>
</body>
</html>